<!DOCTYPE html>
<html lang="zh-CN">
  <head>
      <%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'字典分类信息', styles:'bootstrap,font-awesome,animate,style,bootstrap-table'}){%>
      <style>
          .fixed-table-container{
              background-color: #fff;
          }
      </style>
      <%}%>
  </head>

  <body class="gray-bg">

    <div class="wrapper wrapper-content">
      <div class="row">
        <div class="col-sm-12">

            <!-- START 右侧数据 -->

            <!-- START 查询表单 -->
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>查询</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form id="search-form" role="form" class="form-inline">
                        <div class="form-group">
                            <label for="dictName">分类名称:</label>
                            <input type="text" placeholder="请输入分类名称" id="dictName" name="queryName" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="typeCode" >编码:</label>
                            <input type="text" placeholder="请输入编码" id="typeCode" name="queryTypeCode" class="form-control" />
                        </div>

                        <a class="search-btn btn btn-success" style="margin-bottom: 0px;">查询</a>
                        <button class="btn btn-default" type="reset" style="margin-bottom: 0px;">重置</button>
                    </form>
                </div>
            </div>
            <!-- END 查询表单 -->

                <!-- START 操作按钮 -->
                <div id="toolbar" class="btn-group" style="margin-bottom:5px;">
                  <button type="button" class="add-btn btn btn-sm btn-success"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增</button>
                  <button type="button" class="del-btn btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button>
                </div>
                <!-- END 操作按钮 -->
                
                <!-- START 数据表格 -->
                <table id="dicttable"
                           data-toolbar="#toolbar"
                           data-side-pagination="server"
                           data-pagination="true"
                           data-resizable="true"
                           data-show-columns="true"
                           data-side-pagination="server"
                           data-url="${ctxPath}/dict/info/findall.do"
                           data-page-size="15">
                </table>
                <!-- END 数据表格 -->
                
            <!-- END 右侧数据 -->
        </div>
      </div>
    </div>

    <%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,bootstrap-table-zh-CN,layer'}){}%>

    <script>
    var $dicttable = $('#dicttable'),selections=[];
    $(function(){
        
        //START 表格配置
        $dicttable.bootstrapTable({
            height: getHeight(),
            columns: [
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '编号',
                        field: 'id',
                        align: 'left',
                        valign: 'middle',
                        sortable: true,
                        visible: false
                    },
                    {
                        title: '名称',
                        field: 'name',
                        align: 'left',
                        valign: 'middle',
                        sortable: true
                    },
                    {
                        title: '编码',
                        field: 'typeCode',
                        align: 'left',
                        valign: 'middle',
                        sortable: true
                    },
                    {
                        title: '备注',
                        field: 'remark',
                        align: 'left',
                        valign: 'middle',
                        sortable: true
                    },
                    {
                        field: 'operate',
                        title: '操作',
                        width: 200,
                        align: 'center',
                        valign: 'middle',
                        formatter: optFormatter
                    }
            ],
            onLoadSuccess : function(){
                //修改数据字典分类信息
                $('.edit-dict-btn').on('click',function(){
                    var dictid = $(this).attr('data-val');
                    layer.open({
                        title: '修改数据字典分类信息',
                        type: 2,
                        area: ['780px', '320px'],
                        content: ['${ctxPath}/dict/info/editpage.do?id='+dictid, 'no']
                    });
                });
            
                //删除数据字典分类信息
                $('.del-dict-btn').on('click',function(){
                    var delid  = $(this).attr('data-val');
                    var delname  = $(this).attr('data-val-name');

                    //删除提示
                    layer.confirm('确定要删除当前字典分类？<br>['+delname+']', {
                        btn: ['确定','取消'],title:'提示'
                    }, function(){
                        $.post('${ctxPath}/dict/info/delete.do',{ids: delid},function(data){
                            if( data.ok ){
                                layer.msg(data.msg,{icon: 1,time: 1500},function(){
                                    //刷新页面
                                    $dicttable.bootstrapTable('refresh');
                                });
                            }else{
                                layer.msg(data.msg,{icon: 0,time: 1500});
                            }
                        });
                    });


                });
                
            }
        });
        //END 表格配置
        
        //新增数据字典分类信息
        $('.add-btn').on('click',function(){//新增
            layer.open({
                title: '新增数据字典分类信息',
                type: 2,
                area: ['790px', '320px'],
                skin: 'layer-ext-espresso', 
                content: ['${ctxPath}/dict/info/addpage.do', 'no']
            });
        });
        
        //删除数据字典分类信息
        $('.del-btn').on('click',function(){
            var selDatas = $dicttable.bootstrapTable('getSelections');
            if( selDatas.length == 0 ){
                layer.msg('请选择要删除的数据字典分类信息',{icon: 0,shade: [0.8, '#393D49'],time: 1500});
            }else{
                var ids = [],names = [];
                $.each(selDatas,function(i,d){
                    ids.push(d.id);
                    names.push(d.name);
                });
                ids = ids.join(',');
                names = names.join(',');

                layer.confirm('确定要删除这些字典分类？<br>['+names+']', {
                    btn: ['确定','取消'],title:'提示'
                }, function(){
                    $.post('${ctxPath}/dict/info/delete.do',{ids:ids},function(data){
                        if( data.ok ){
                            layer.msg(data.msg,{icon: 1,time: 1500},function(){
                                //刷新页面
                                $dicttable.bootstrapTable('refresh');
                            });
                        }else{
                            layer.msg(data.msg,{icon: 0,time: 1500});
                        }
                    });
                });


            }
        });

        //查询
        $('.search-btn').on('click',function(){
            $dicttable.bootstrapTable('refresh', { url:'${ctxPath}/dict/info/findall.do?'+$('#search-form').serialize() })
        });
        
        //表格高度自适应
        $(window).resize(function () {
            $dicttable.bootstrapTable('resetView', {
                height: getHeight()
            });
        });
    });
    
    //操作菜单
    function optFormatter(value,row){
        var content = '<button class="edit-dict-btn btn btn-xs btn-info" data-val="'+row.id+'"  title="修改"><i class="fa fa-edit"></i> 修改 </button>';
        content += '&nbsp;<button class="del-dict-btn btn btn-xs btn-danger" data-val="'+row.id+'" data-val-name="'+row.name+'" title="删除"><i class="fa fa-trash-o"></i> 删除 </button>';
        return content;
    }
    
    //表格高度计算
    function getHeight() {
        return $(window).height() - $('.btn-group').outerHeight(true) - $('.ibox').outerHeight(true) - $('.pagination-detail').outerHeight(true);
    }
    </script>
  </body>
</html>
